<template>
    <div>
        <!-- <img src="./test.svg" alt=""> -->
        <img src="./start.svg" alt="">
        <div ref="testRef"></div>
        <div class="preview">
            <div class="previewContent">
                原始数据
                <div v-html="preview"></div>
            </div>
            <div class="previewContent">
                xss过滤后
                <div v-html="xssPreview"></div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from "vue";
import E from "wangeditor";
import xss from "xss";
import editorConfig from "./conf.js"

export default {
    name: "test",
    data() {
        return {
            preview: "",
            xssPreview: "",
            options: {
                whiteList: editorConfig.editorConfig,
                stripIgnoreTag: true
            }
        };
    },
    activated() {},
    mounted() {
        this.createEditor();
        console.log(editorConfig);
    },
    deactivated() {},
    methods: {
        createEditor() {
            this.editor = new E(this.$refs.testRef);
            this.editor.customConfig.onchange = html => {
                this.preview = html;
                this.xssPreview = xss(html, this.options);
            };
            this.editor.create();
        }
    }
};
</script>

<style scoped>
.preview {
    display: flex;
    margin-top: 10px;
}
.previewContent {
    flex: 1;
    border: 1px dotted;
    min-height: 200px;
}
.previewContent:first-child {
    border-right: none;
}
</style>
